<!--
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Beyond The Game</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script language="javascript" src="tdl/base.js"></script>
		<script language="javascript" src="jquery.min.js"></script>
		<!-- qtre -->
		<script language="javascript" src="qtre/core.js"></script>
		<script language="javascript" src="qtre/input.js"></script>
		<script language="javascript" src="qtre/camera.js"></script>
		<script language="javascript" src="qtre/material.js"></script>
		<script language="javascript" src="qtre/renderable.js"></script>
		<script language="javascript" src="qtre/sceneManager.js"></script>
		<script language="javascript" src="qtre/sceneNode.js"></script>
		<script language="javascript" src="qtre/colladaloader.js"></script>
		<script language="javascript" src="qtre/postProcessing.js"></script>
		<script language="javascript" src="qtre/ui.js"></script>
		<!-- cufon -->
		<script src="lib/cufon/cufon-yui.js" type="text/javascript"></script>
		<script type="text/javascript" src="lib/cufon/Note_this_400.font.js"></script>
		<!--jquery ui-->
		<script src="lib/jquery-ui/jquery-ui-1.8.9.custom.min.js"></script>
		<link rel="stylesheet" type="text/css" href="lib/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css"/>
		<!--google wave scroll-->
		<script language="javascript" src="lib/gwave-scroll.js"></script>
		<link rel="stylesheet" type="text/css" href="lib/gwave-scroll.css" />
		
		<script language="javascript" src="main.js"></script>
		
		<link rel="stylesheet" type="text/css" href="main.css"/>
	</head>
	<body style="width:100%; height: 100%; margin: 0px">
		<h1>Beyond The Game</h1>
		<canvas id="ocean" style="width:100%; height: 100%"></canvas>
		<div id="categories">
			<ul>
			</ul>
		</div>
		<div id="adjustPanel">
			<h2>参数调整</h2>
		</div>
		<div id="container">
			<iframe src="./wordpress/index.php"></iframe>
		</div>
		<div id="track">
			<div class="info">
				<h2>TRACK</h2>
				<span class="title"></span>
			</div>
			<a href="http://www.qsc.zju.edu.cn/bubble" target="_blank">
				<img src="images/bubble-logo.png" class="logo"/>
			</a>
			<audio autoplay="true" controls="true" >
		</div>

		
		<script id="oceanVertexShader" type="text/something-not-javascript">
		uniform mat4 worldViewProjection;
		uniform vec3 lightWorldPos;
		uniform mat4 world;
		uniform mat4 viewInverse;
		uniform mat4 worldInverseTranspose;
		uniform float Timer;
		uniform float WaveAmp;
		uniform float WaveFreq;
		uniform float BumpScale;
		uniform float TexReptX;
		uniform float TexReptY;
		uniform float BumpSpeedX;
		uniform float BumpSpeedY;

		#define NWAVES 2
		struct Wave{
			float freq;		//2*PI
			float amp;		//
			float phase;	//speed * 2*PI 
			vec2 dir;
		};
		Wave wave[NWAVES];
		Wave w1 = Wave(1.0, 1.0, 0.5, vec2(-1, 0));
		Wave w2 = Wave(2.0, 0.5, 1.3, vec2(-0.7, 0.7));

		float evaluateWave(Wave w, vec2 pos, float t)
		{
			return w.amp * sin(dot(w.dir, pos)*w.freq + t*w.phase);
		}

		float evaluateWaveDeriv(Wave w, vec2 pos, float t)
		{
			return w.freq*w.amp*cos(dot(w.dir, pos)*w.freq+t*w.phase);
		}

		float evaluateWaveSharp(Wave w, vec2 pos, float t, float k)
		{
			return w.amp * pow(sin(dot(w.dir, pos)*w.freq + t*w.phase)*0.5 + 0.5, k);
		}

		float evaluateWaveDerivSharp(Wave w, vec2 pos, float t, float k)
		{
			return k*w.freq*w.amp*pow(sin(dot(w.dir, pos)*w.freq+t*w.phase)*0.5 + 0.5, k-1.0)*cos(dot(w.dir, pos)*w.freq+t*w.phase);
		}
		
		attribute vec4 position;
		attribute vec3 normal;
		attribute vec2 texCoord;
		varying vec4 v_position;
		varying vec3 v_normal;
		varying vec3 v_surfaceToLight;
		varying vec3 v_surfaceToView;
		varying vec2 v_bumpUV0;
		varying vec2 v_bumpUV1;
		varying vec2 v_bumpUV2;
		varying vec3 T2World1;
		varying vec3 T2World2;
		varying vec3 T2World3;
		varying vec2 v_uv;
		
		void main() {
			wave[0] = w1;
			wave[1] = w2;
			
			wave[0].freq = WaveFreq;
			wave[0].amp = WaveAmp;
			wave[1].freq = WaveFreq*2.0;
			wave[1].amp = WaveAmp*0.5;
			vec4 pos = position;
			pos.y = 0.0;
			float ddx = 0.0, ddy = 0.0;
			for(int i=0; i < NWAVES;i++){
				pos.y += evaluateWaveSharp(wave[i], pos.xz, Timer, 3.0);
				float deriv = evaluateWaveDerivSharp(wave[i], pos.xz, Timer, 3.0);
				ddx += deriv*wave[i].dir.x;
				ddy += deriv*wave[i].dir.y;
			}

			vec3 B = vec3(1.0, ddx, 0.0);
			vec3 T = vec3(0.0, ddy, 1.0);
			vec3 N = vec3(-ddx, 1.0, -ddy);
			v_normal = N;
			mat3 objToTangentSpace;
			objToTangentSpace[0] = BumpScale*normalize(T);
			objToTangentSpace[1] = BumpScale*normalize(B);
			objToTangentSpace[2] = normalize(N);
			T2World1.xyz = BumpScale * B;
			T2World2.xyz = BumpScale * T;
			T2World3.xyz = N;
			
			gl_Position = worldViewProjection * pos;
			v_surfaceToView = viewInverse[3].xyz - (world * position).xyz;
			v_surfaceToLight = lightWorldPos.xyz - (world * position).xyz;
			vec2 TextureScale = vec2(TexReptX, TexReptY);
			vec2 BumpSpeed = vec2(BumpSpeedX, BumpSpeedY);
			vec2 uv = texCoord * TextureScale;
			v_uv = texCoord;
			float cycle = mod(Timer, 100.0);
			v_bumpUV0.xy = uv.xy*TextureScale + cycle*BumpSpeed;
			v_bumpUV1.xy = uv.xy*TextureScale*2.0 + cycle*BumpSpeed*4.0;
			v_bumpUV2.xy = uv.xy*TextureScale*4.0 + cycle*BumpSpeed*8.0;
		}

		</script>
		<script id="oceanFragmentShader" type="text/something-not-javascript">
		#ifdef GL_ES
		precision highp float;
		#endif
		uniform vec4 lightColor;
		varying vec4 v_position;
		varying vec2 v_texCoord;
		varying vec3 v_normal;
		varying vec3 v_surfaceToLight;
		varying vec3 v_surfaceToView;
		varying vec2 v_bumpUV0;
		varying vec2 v_bumpUV1;
		varying vec2 v_bumpUV2;
		varying vec3 T2World1;
		varying vec3 T2World2;
		varying vec3 T2World3;
		varying vec2 v_uv;

		uniform sampler2D diffuseSampler;
		uniform vec4 specular;
		uniform sampler2D normalSampler;
		uniform float shininess;
		uniform samplerCube skyBox;
		uniform vec3 DeepColor;
		uniform vec3 ShallowColor;
		uniform float Kr;
		uniform float FresnelBias;
		uniform float FresnelExp;

		vec4 lit(float l ,float h, float m) {
			return vec4(1.0,
					  max(l, 0.0),
					  (l > 0.0) ? pow(max(0.0, h), m) : 0.0,
					  1.0);
		}
		void main() {
			vec4 diffuse = texture2D(diffuseSampler, v_uv);
			vec4 t0 = texture2D(normalSampler, v_bumpUV0)*2.0 - 1.0;
			vec4 t1 = texture2D(normalSampler, v_bumpUV1)*2.0 - 1.0;
			vec4 t2 = texture2D(normalSampler, v_bumpUV2)*2.0 - 1.0;
			vec3 nt = t0.xyz + t1.xyz + t2.xyz;
			mat3 m;
			m[0] = T2World1;
			m[1] = T2World2;
			m[2] = T2World3;
			vec3 nw = normalize(nt * m);  //why nt*m not m*nt, the same??

			vec3 surfaceToLight = normalize(v_surfaceToLight);
			vec3 surfaceToView = normalize(v_surfaceToView);
			vec3 halfVector = normalize(surfaceToLight + surfaceToView);
			
			vec3 r = reflect(surfaceToView, nw);
			vec4 reflection = textureCube(skyBox, r);
			
			float facing = 1.0 - max(dot(surfaceToView, nw), 0.0);
			float fres = Kr*(FresnelBias + (1.0 - FresnelBias)*pow(facing, FresnelExp));
			
			vec3 waterColor = mix(DeepColor, ShallowColor, facing);
			vec3 result = waterColor + (fres*reflection).xyz;
			gl_FragColor = vec4(result.rgb, 1.0);
		}
		</script>
		<script id="articleVertexShader" type="text/something-not-javascript">
			attribute vec4 position;
			attribute vec3 normal;
			attribute vec2 texCoord;
			uniform mat4 worldViewProjection;
			uniform mat4 world;
			uniform mat4 worldInverseTranspose;
			varying vec4 v_position;
			varying vec3 v_normal;
			varying vec2 v_uv;
			void main() {
				v_position = world * position;
				v_normal = (worldInverseTranspose * vec4(normal, 0.0)).xyz;
				v_uv = texCoord;
				gl_Position = worldViewProjection * position;
			}
		</script>
		<script id="articleFragmentShader" type="text/something-not-javascript">
			#ifdef GL_ES
			precision highp float;
			#endif
			uniform sampler2D diffuse;
			uniform mat4 viewInverse;
			varying vec2 v_uv;
			varying vec3 v_normal;
			void main() {
				vec2 samples[12];
				samples[0] = vec2(-0.326212, -0.405805);
				samples[1] = vec2(-0.840144, -0.0735802);
				samples[2] = vec2(-0.695914,  0.457137);
				samples[3] = vec2(-0.203345,  0.620716);
				samples[4] = vec2(0.962340, -0.194983);
				samples[5] = vec2(0.473434, -0.480026);
				samples[6] = vec2(0.519456,  0.767022);
				samples[7] = vec2(0.185461, -0.893124);
				samples[8] = vec2(0.507431,  0.064425);
				samples[9] = vec2(0.896420,  0.412458);
				samples[10] = vec2(-0.321940, -0.932615);
				samples[11] = vec2(-0.791559, -0.597705);
				
				vec4 blur = texture2D(diffuse, v_uv);
				/*
				for (int i = 0; i < 12; i++){
					blur += texture2D(diffuse, v_uv + 0.03 * samples[i]);
				}
				blur /= 13.0;
				*/
				gl_FragColor = vec4(blur.xyz, 1.0);
			}
		</script>
		<script id="postProcessVertexShader" type="text/something-not-javascript">
			attribute vec4 position;
			attribute vec2 texCoord;
			varying vec4 v_position;
			varying vec2 v_uv;
			void main() {
				v_position = position;
				v_uv = texCoord;
				gl_Position = position;
			}
		</script>
		<script id="depthVertexShader" type="text/something-not-javascript">
		uniform mat4 worldViewProjection;
		attribute vec4 position;
		varying vec4 v_position;
		void main() {
			v_position = (worldViewProjection * position);
			gl_Position = v_position;
		}
		</script>
		<script id="depthFragmentShader" type="text/something-not-javascript">
		#ifdef GL_ES
		precision highp float;
		#endif
		varying vec4 v_position;
		void main() {
			float depth = v_position.z / v_position.w;
			//vec4 shift = vec4(256.0*256.0*256.0, 256.0*256.0, 256.0, 1.0);
			gl_FragColor =  vec4(depth, depth, depth, 1.0);
		}
		</script>
		<script id="polishFragmentShader" type="text/someting-not-javascript">
			#ifdef GL_ES
			precision highp float;
			#endif
			uniform sampler2D diffuse;
			uniform float blurFactor;
			varying vec2 v_uv;

			void main() {
				vec2 samples[12];
				samples[0] = vec2(-0.326212, -0.405805);
				samples[1] = vec2(-0.840144, -0.0735802);
				samples[2] = vec2(-0.695914,  0.457137);
				samples[3] = vec2(-0.203345,  0.620716);
				samples[4] = vec2(0.962340, -0.194983);
				samples[5] = vec2(0.473434, -0.480026);
				samples[6] = vec2(0.519456,  0.767022);
				samples[7] = vec2(0.185461, -0.893124);
				samples[8] = vec2(0.507431,  0.064425);
				samples[9] = vec2(0.896420,  0.412458);
				samples[10] = vec2(-0.321940, -0.932615);
				samples[11] = vec2(-0.791559, -0.597705);

				vec2 uv = vec2(v_uv.x, 1.0 - v_uv.y);

				vec4 blur = texture2D(diffuse, uv);

				bool isBlur = v_uv.x < 0.9 && v_uv.x > 0.1 && v_uv.y > 0.0 && v_uv.y < 1.0;
				if(isBlur){
					for (int i = 0; i < 12; i++){
						blur += texture2D(diffuse, uv + 0.001 * blurFactor * samples[i]);
					}
					blur /= 13.0;
					blur = blur * 0.7 + vec4(1.0, 1.0, 1.0, 1.0)*0.3;
				}
				gl_FragColor = blur;
			}
		</script>
	</body>
</html>
